<template>
  <div class="login">
    <div v-show="!showRule">
      <div class="login-bg"></div>
      <router-link to="/home" tag="a" class="back-home"></router-link>
      <div class="content">
        <div class="tab">
          <div class="item" :class="type === 'LOGIN' ? 'active' : ''" @click="type = 'LOGIN'">
            求职者登录
          </div>
          <div class="item" :class="type === 'REGISTER' ? 'active' : ''" @click="type = 'REGISTER'">
            求职者注册
          </div>
        </div>
        <div class="bar">
          <div class="item" v-show="type === 'LOGIN'">
            <div class="input-box icon-user clearfix">
              <!-- <span class="front fl">手机号码</span> -->
              <input
                class="fl"
                type="tel"
                maxlength="11"
                placeholder="手机号码"
                v-model="loginTel"
              />
            </div>
            <div class="input-box icon-psw clearfix">
              <!-- <span class="front fl">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</span> -->
              <input
                class="fl"
                type="password"
                placeholder="密码"
                minlength="6"
                v-model="loginPsw"
              />
            </div>
            <div class="clearfix">
              <el-tooltip
                class="item"
                effect="dark"
                :hideAfter="5000"
                :content="tooltipConcent"
                placement="top-start"
              >
                <div class="forget fr">忘记密码</div>
              </el-tooltip>
            </div>
            <div class="btn btn-login" @click="login">登录</div>
          </div>
          <div class="item" v-show="type === 'REGISTER'">
            <div class="input-box icon-user clearfix">
              <!-- <span class="front fl">手机号码</span> -->
              <input
                class="fl"
                type="tel"
                maxlength="11"
                placeholder="手机号码"
                v-model="registerTel"
              />
            </div>
            <div class="input-box icon-psw clearfix">
              <!-- <span class="front fl">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</span> -->
              <input
                class="fl"
                type="password"
                minlength="6"
                placeholder="密码"
                v-model="registerPsw"
              />
            </div>
            <div class="input-box icon-psw clearfix">
              <!-- <span class="front fl">确认密码</span> -->
              <input
                class="fl"
                type="password"
                minlength="6"
                placeholder="确认密码"
                v-model="registerPswSen"
              />
            </div>
            <div>
              <el-checkbox v-model="checked">我已阅读并同意</el-checkbox
              ><a style="color: #4ca8fe;margin-left: -0.2rem;" @click.stop="toRule">《平台用户隐私协议》</a>
            </div>
            <div class="btn btn-login" @click="register">注册并登录</div>
          </div>
        </div>
      </div>
      <div class="bottom-tip">
        <div class="tip" @click="showTip = true">我是企业用户</div>
        <p class="ym">@{{ projectTitle }}</p>
      </div>
      <van-dialog v-model="showTip" title="">
        <p>{{ tooltipConcent2 }}</p>
      </van-dialog>
    </div>
    <v-rule :show="showRule" @closeRule="closeRule" />
  </div>
</template>

<script>
import rule from '../components/rule'
export default {
  data() {
    return {
      type: 'LOGIN',
      checked: false,
      showTip: false,
      showRule: false,
      loginTel: '',
      loginPsw: '',
      registerTel: '',
      registerPsw: '',
      registerPswSen: '',
      tooltipConcent: '请联系平台管理员重置密码，联系方式：' + this.$config.contactPhone,
      tooltipConcent2: '企业用户请访问：' + this.$config.contactPage,
      projectTitle: this.$config.pageTitle
    }
  },
  components: {
    'v-rule': rule
  },
  methods: {
    toRule() {
      this.showRule = true
    },
    closeRule() {
      this.showRule = false
    },
    checkLogin() {
      // eslint-disable-next-line no-undef
      if (!this.loginTel || !checkFormat.isMobilePhone(this.loginTel)) {
        this.$message({
          message: '请输入正确的11位手机号码',
          type: 'warning'
        })
        return false
      }
      if (!this.loginPsw || this.loginPsw.length < 6) {
        this.$message({
          message: '请输入6位字符的密码',
          type: 'warning'
        })
        return false
      }
      return true
    },
    checkedReg() {
      if (!this.checked) {
        this.$message({
          offset: 0,
          message: '请阅读并同意《平台用户隐私协议》',
          type: 'warning'
        })
        return false
      }
      // eslint-disable-next-line no-undef
      if (!this.registerTel || !checkFormat.isMobilePhone(this.registerTel)) {
        this.$message({
          offset: 0,
          message: '请输入正确的11位手机号码',
          type: 'warning'
        })
        return false
      }
      if (!this.registerPsw || this.registerPsw.length < 6) {
        this.$message({
          message: '请输入6位字符的密码',
          type: 'warning'
        })
        return false
      }
      if (!this.registerPswSen) {
        this.$message({
          message: '请输入确认密码',
          type: 'warning'
        })
        return false
      }
      if (this.registerPsw !== this.registerPswSen) {
        this.$message({
          message: '两次密码输入不一致',
          type: 'warning'
        })
        return false
      }
      return true
    },
    login() {
      if (this.checkLogin()) {
        this.$http
          .login({
            account: this.loginTel,
            password: this.loginPsw,
            sysType: this.$config.sysType
          })
          .then((res) => {
            if (res.httpStatusCode === 200 && res.success) {
              const token = 'Bearer ' + res.model.token
              localStorage.setItem('ACCESS_TOKEN', token)
              localStorage.setItem('loginState', true)
              this.$router.push({ path: '/mine' })
            } else {
              this.$message({
                message: res.message,
                type: 'warning'
              })
              return false
            }
          })
      }
    },
    register() {
      if (this.checkedReg()) {
        this.$http
          .register({
            newPwd: this.registerPsw,
            phone: this.registerTel,
            rePwd: this.registerPswSen,
            sysType: this.$config.sysType
          })
          .then((res) => {
            if (res.httpStatusCode === 200 && res.success) {
              const token = 'Bearer ' + res.model.token
              localStorage.setItem('ACCESS_TOKEN', token)
              localStorage.setItem('loginState', true)
              this.$router.go(-1)
            } else {
              this.$message({
                message: res.message,
                type: 'warning'
              })
              return false
            }
          })
      }
    }
  }
}
</script>

<style lang="less">
.login {
  width: 100%;
  // height: 100vh;
  position: relative;
  .back-home {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    background: url('../assets/images/home.svg') no-repeat left center;
    background-size: 0.5rem;
    position: fixed;
    top: 0.2rem;
    right: 0.2rem;
  }
  .login-bg {
    width: 100%;
    height: 5.2rem;
    background: url('../assets/images/login-bg.png') no-repeat center;
    background-size: 100%;
  }
  .content {
    .tab {
      display: flex;
      flex-direction: row;
      justify-content: center;
      margin-bottom: 0.5rem;
      .item {
        // width: 1.6rem;
        height: 0.6rem;
        line-height: 0.6rem;
        color: #999;
        font-size: 0.32rem;
        margin: 0 0.6rem;
      }
      .item.active {
        color: #4ca8fe;
      }
    }
    .bar {
      padding: 0 12%;
      height: 6rem;
      .item {
        .input-box {
          height: 1rem;
          line-height: 0.98rem;
          border-radius: 0.98rem;
          border: 1px solid #8ebcff;
          margin: 0 auto;
          background: #f1f7ff;
          margin-top: 0.36rem;
          padding-left: 0.6rem;
          .front {
            font-size: 0.3rem;
            color: #999;
            display: inline-block;
            margin-left: 0.15rem;
            text-align: left;
            width: 26%;
          }
          input {
            border: none;
            background: none;
            line-height: 0.96rem;
            color: #999;
            padding-left: 10px;
            font-size: 0.3rem;
            width: 90%;
            float: left;
          }
        }
        .forget {
          color: #4ca8fe;
          margin: 0.3rem 0;
          font-size: 0.26rem;
          margin-right: 0.3rem;
        }
        .input-box.icon-user {
          background: url('../assets/images/icon-username.png') no-repeat;
          background-position: 0.3rem center;
          background-size: 0.27rem 0.27rem;
        }
        .input-box.icon-psw {
          background: url('../assets/images/icon-psw.png') no-repeat;
          background-position: 0.3rem center;
          background-size: 0.27rem 0.3rem;
        }
      }
    }
  }
  .el-button:focus {
    background: none;
    outline: none;
  }
  .el-checkbox {
    padding: 0.24rem 0;
    transform: translateX(-0.4rem);
  }
  .bottom-tip {
    width: 100%;
    font-size: 0.26rem;
    margin-top: 0.3rem;
    .tip {
      color: #4ca8fe;
    }
    .ym {
      margin-top: 0.2rem;
    }
  }
}
</style>
